interface WatermarkProps {
  text: string;
  fontSize: number;
  gap: number;
  // 你可以根据需要添加更多属性，比如字体颜色、旋转角度等
}

function createWatermarkBg(props: WatermarkProps): {
  base64: string;
  size: { width: number; height: number };
} {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  if (!ctx) {
    throw new Error("Could not get 2D context for canvas");
  }

  // 设置水印字体
  ctx.font = `${props.fontSize}px Arial`;
  const textWidth = ctx.measureText(props.text).width;
  const textHeight = props.fontSize;

  // 计算画布大小，使水印能在画布上以一定间隔重复
  const canvasWidth = textWidth - 5 * props.gap;
  const canvasHeight = textHeight + 1 * props.gap;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  // 绘制水印文本
  ctx.fillStyle = "rgba(0, 0, 0, 0.1)"; // 水印颜色和透明度
  ctx.translate(props.gap, props.gap + textHeight);
  ctx.rotate(-Math.PI / 4); // 旋转水印，这里是45度
  ctx.fillText(props.text, 0, 0);

  // 将canvas内容转换为Base64
  const base64 = canvas.toDataURL("image/png");

  return {
    base64,
    size: { width: canvasWidth, height: canvasHeight },
  };
}

export function useWatermarkBg(props: WatermarkProps) {
  const { base64, size } = createWatermarkBg(props);
  return {
    base64,
    size,
  };
}
